<template>
  <div class="content_left_sqjbxx">
    <titleBox text="社区基本信息" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding: 5px 10px;border: 1px solid #11afc180;">
        <div id="outer-container">
          <div id="inner-container" v-if="info">
            <div class="item" v-for="img in info.images" :key="img" style="
              display: inline-block;
              width: 120px;
              height: 80px;
              margin:5px;
            ">
              <a-image style="border-radius: 5px;" :width="120" :height="80" :src="img" />
            </div>
            <div class="item" v-for="img in info.images" :key="img" style="
              display: inline-block;
              width: 120px;
              height: 80px;
              margin:5px;
            ">
              <a-image style="border-radius: 5px;" :width="120" :height="80" :src="img" />
            </div>
          </div>
        </div>
        <!-- <div style="  display: grid;  grid-auto-flow: column; overflow-x: auto; grid-gap: 10px; overflow:hidden; ">

    </div> -->
        <div v-if="info" style="
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
          line-height: 19.6px;
          text-indent: 32px;
          letter-spacing: 0%;
          margin: 5px 0px;
        ">
          {{ info.summary }}
        </div>
        <!-- <div style="display: flex; flex-wrap: wrap" v-if="info">
        <div style="width: 50%">
          <dataOne
            icon="/img/myimg/zmj.png"
            title="总面积"
            :value="info.area"
            unit="平方公里"
          ></dataOne>
        </div>
        <div style="width: 50%">
          <dataOne
            icon="/img/myimg/zrk.png"
            title="总人口"
            :value="info.people_total"
            unit="人"
          ></dataOne>
        </div>
        <div style="width: 50%">
          <dataOne
            icon="/img/myimg/hjrk.png"
            title="户籍人口"
            :value="info.people_register"
            unit="人"
          ></dataOne>
        </div>
        <div style="width: 50%">
          <dataOne
            icon="/img/myimg/czrk.png"
            title="常住人口"
            :value="info.people_resident"
            unit="人"
          ></dataOne>
        </div>
      </div> -->
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, nextTick } from "vue"
import $api from "@/utils/request.js"
import titleBox from "../mConponents/titleBox.vue"
import dataOne from "../mConponents/dataOne.vue"

onMounted(() => {

  getData()
})
const info = ref(null)
const content = ref(null)
const height = ref(0)
const show = ref(false)
const getData = async () => {
  const res = await $api.get("/api/Screen/communitySummary")
  if (res.code === 1) {
    info.value = res.data
    nextTick(() => {
      height.value = content.value.offsetHeight
      show.value = true
    })
  }
}
</script>
<style scoped lang="less">
.content_left_sqjbxx {
  .content {
    background-color: #001a1dcc;
    width: 330px;
    border-radius: 5px;
    margin-top: 5px;
  }
}


#outer-container {
  width: 100%;
  /* 设置外部容器宽度 */
  overflow: hidden;
  /* 隐藏溢出部分 */
}

#inner-container {
  display: inline-block;
  white-space: nowrap;
  /* 防止文字换行 */
  animation: scrollLeft 20s linear infinite;
  /* 使用动画让整个容器向左滚动 */
}

// .item {
//   display: inline-block;
//   width: 100px;
//   height: 100px;
//   background-color: lightblue;
//   margin: 5px;
// }

/* 定义动画 */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50%));
    /* 加上一些额外的空白，以便滚动到最后一个元素时不会立即切换 */
  }
}
</style>
